<template>
	<view class="cateList">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in cateObj.category.bannerUrlList" :key="index">
				<view class="swiper-item">
					<image class="cateListImg" :src="item" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cateListTitlle">
			{{cateObj.category.frontName}}
		</view>
		<view class="cateListDesc">
			{{cateObj.category.frontDesc}}
		</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<view class="goodsItem" v-for="item in cateObj.itemList" :key="item.id" @click="toDetail(item)">
				<image class="goodsImg" :src="item.primaryPicUrl" mode=""></image>
				<view class="goodsDesc">
					{{item.name}}
				</view>
				<view class="goodsPrice">
					{{item.counterPrice}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		name:"CateList",
		props: ['L1Id'],
		data() {
			return {
				cateList: []
			};
		},
		mounted() {
			this.getCateList()
		},
		computed: {
			cateObj() {
				return this.cateList.find(item => item.category.parentId === this.L1Id) 
			}
		},
		methods: {
			async getCateList() {
				const res = await request('/getIndexCateList')
				// console.log(res);
				this.cateList = res.indexCateList
			},
			toDetail(goodsItem) {
				wx.navigateTo({
					url: '/pages/detail/detail?goodsItem=' + JSON.stringify(goodsItem)
				})
			}
		},
	}
</script>

<style lang="less">
.cateList {
	.swiper {
		height: 360rpx;
		.cateListImg {
			width: 100%;
			height: 360rpx;
		}
	}
	.cateListTitlle {
		font-size: 40rpx;
		line-height: 80rpx;
		color: #333;
		text-align: center;
	}
	.cateListDesc {
		font-size: 30rpx;
		line-height: 40rpx;
		color: #666;
		text-align: center;
	}
	.goodsList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		&::after {
			content: '';
			width: 344rpx;
		}
		.goodsItem {
			width: 344rpx;
			height: 480rpx;
			.goodsImg {
				width: 344rpx;
				height: 344rpx;
			}
			.goodsPrice {
				color: red;
				font-size: 36rpx;
			}
		}
	}
}
</style>